<!DOCTYPE html>
<html ng-app="modalTest">
	<head>
		<title>Angular-Dialogs-Service Demo v5.2.1 (Font-Awesome)</title>
		<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
		<script src="//cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.4.8/angular-sanitize.js"></script>
		<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
		<script src="js/dialogs.js"></script>
		<script src="js/dialogTest2.js"></script>
	
		<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
		<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="css/dialogs.css">
		
		<style>
			body { padding: 20px; }
			.my-class .modal-body {
				background-color: #eee;
			}
			.my-class .modal-footer {
				margin-top: 0;
			}
		</style>
	</head>
	<body ng-controller="dialogServiceTest">
		<div class="row">
			<div class="col-md-12">
				<h1>Dialog Service Demo (v5.3) <span class="text-muted"><small>Font-Awesome Compatible</small></span></h1>
				<p class="text-info">(Using: Bootstrap 3.3.6, AngularJS 1.4.8, Angular UI Bootstrap 0.14.3, Font-Awesome 4.5)</p>
				<p>This Demo of Angular-Dialog-Service is the same as the demo for using the service without <em>Angular-Translate</em>.  Except now the service checks to see if <em>Font-Awesome</em> has been loaded and will automatically use Font-Awesome icons instead of the Bootstrap "glyphicons," in the header of the predefined dialogs.</p><p>Previously glyphicons were hard wired in, if you didn't include the Bootstrap version with the glyphicons because you were using Font-Awesome instead, then nothing appeared in the dialog headers.  Now the service will automatically detect that you're using Font-Awesome and include the equivalent icons for each predefined dialog.<br>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<button class="btn btn-danger" ng-click="launch('error')">Error Dialog</button>
				<button class="btn btn-primary" ng-click="launch('wait')">Wait Dialog</button>
				<button class="btn btn-primary" ng-click="launch('customwait')">"Custom" Wait Dialog</button>
				<button class="btn btn-default" ng-click="launch('notify')">Notify Dialog</button>
				<button class="btn btn-success" ng-click="launch('confirm')">Confirm Dialog</button>
        		<button class="btn btn-warning" ng-click="launch('custom')">Custom Dialog</button>
        		<button class="btn btn-warning" ng-click="launch('custom2')">Custom Dialog 2</button>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<br>
				<p><strong>Confirmation</strong>: {{confirmed}}</p>
				<p><strong>Name Enter (From Custom)</strong>: {{name}}</p>
				<p><strong>Custom 2 Value</strong>: {{custom.val}}</p>
			</div>
		</div>
	</body>
</html>
